<template>
    <view style="margin-bottom:200rpx;height:100%">
        <view v-if="cartList.length != 0">
            <view class="header">
                <view class="cart">购物车</view>
                <view class="cart-total">共{{total}}件宝贝</view>
            </view>
            <view class="shopping-box">
                <block v-for="(item, index) in cartList" :key="index">
                    <view class="shopping-item">
                        <view class="shopping-item-line1">
                            <view class="shop-icon iconfont icon-shangdian"></view>
                            <view class="shop-name">{{item.store_name}}<i class="iconfont icon-xiangyou" style="color:#333333;margin-left:20rpx;vertical-align: top"></i></view>
                        </view>
                        <block v-for="(item2, index2) in item.list" :key="index2">
                            <view class="shopping-item-line2">
                                <view>
                                    <checkbox-group @change="checkboxChange(item2, index2)">
                                        <checkbox :value="item2.cart_id" :checked="item2.checked"/>
                                    </checkbox-group>
                                </view>
                                <view class="shopping-item-img">
                                    <img :src="item2.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                                </view>
                                <view class="shopping-item-info">
                                    <view class="shopping-item-info-name">
                                        {{item2.spu.spu_name}}
                                        <block v-for="(item3, index3) in item2.spu.sku" :key="index3">
                                            <text v-if="item3.id == item2.sku_id" style="margin-left:20rpx">{{item3.sku_name}}</text>
                                        </block>
                                    </view>
                                    <view class="shopping-item-info-price">
                                        <block v-for="(item4, index4) in item2.spu.sku" :key="index4">
                                            <view class="now-price" v-if="item4.id == item2.sku_id">￥{{item4.activity_price}}</view>
                                            <view class="old-price" v-if="item4.id == item2.sku_id">￥{{item4.price}}</view>
                                        </block>
                                    </view>
                                    <view class="shopping-item-other">
                                        <view class="free-shipping">包邮</view>
                                        <view class="shopping-item-info-num">
                                            <view class="num-sub" @tap="reduceNum(item2)">
                                                <img src="../../static/-.png" alt="" style="width:100%;height:100%">
                                            </view>
                                            <view class="num-number">{{item2.number}}</view>
                                            <view class="num-add" @tap="addNum(item2)">
                                                <img src="../../static/+.png" alt="" style="width:100%;height:100%">
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view class="cart-del" @tap="delCart(item2.id)">
                                    <view class="iconfont icon-xiazai14" style="font-size:40rpx;color:#999"></view>
                                </view>
                            </view>
                        </block>
                    </view>
                </block>
            </view>
            <view class="settle-box">
                <view class="settle-box-left">
                    <checkbox-group @change="checkboxChange2">
                        <view>
                            <checkbox :checked="allChecked" />全选
                        </view>
                        <view>{{item.name}}</view>
                    </checkbox-group>
                </view>
                <view class="settle-box-right">
                    <view>合计：<text style="color:#FF1E1E;font-size:36rpx">￥{{totalPrice}}</text></view>
                    <view class="settle-button" @tap="goSettle">结算</view>
                </view>
            </view>
        </view>
        <view class="no-cart" v-else>
            <img :src="img_base_url + '/gouwucheno.png'" alt="" style="width:100%;height:100%">
            <view style="color:#919191;font-size:26rpx;text-align:center;margin-top:44rpx;margin-left:34rpx">暂无商品</view>
        </view> 
        <tabBar address="2"></tabBar>
    </view>
</template>

<script>
import { CartModel } from '../../model/cart'
import tabBar from '../../components/tabBar/tabBar'
import { config } from '../../common/utils/congfig'
const cartModel = new CartModel()
export default {
    data() {
        return {
			img_base_url: config.img_base_url,
            cartList: [],
            goodsList: [],
            total: 0,
            // totalNum: 0,
            // totalPrice: 0,
            allChecked: false,
            allSelectedGoods: [],
            cart_ids: [],
            timer: null,
            arr1: []
        }
    },
    components: {
        tabBar
    },
    onShow() {
        const loginRes = this.checkLogin('/pages/shoppingCart/shoppingCart', '2')
        if(loginRes) {
            this.allChecked = false
            this.arr1= []
            this._getCartList()
        }
    },
    methods: {
        _getCartList() {
            this.total = 0
            // this.goodsList = []
            cartModel.getCartList().then((res) => {
                if(res.code == 200) {
                    let obj = res.data
                    for(let key in obj) {
                        this.total += parseInt(obj[key].list.length)
                        obj[key].list.map((item) => {
                            item.checked = false
                            // this.goodsList.push(item)
                        })
                    }
                    this.cartList = obj
                }
            })
        },
        reduceNum(item2) {
            clearTimeout(this.timer)
            if(item2.number > 1) {
                this.timer = setTimeout(() => {
                    let data = {
                        id: item2.cart_id
                    }
                    cartModel.cartSubNumber(data).then((res) => {
                        if(res.code == 200) {
                            item2.number = item2.number - 1
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            })
                        }
                    })
                }, 1000)
            }else {
                uni.showToast({
                    title: '至少购买一件商品',
                    icon: 'none'
                })
            }
        },
        addNum(item2) {
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                let data = {
                    id: item2.cart_id
                }
                cartModel.cartAddNumber(data).then((res) => {
                if(res.code == 200) {
                    item2.number = item2.number + 1
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
            }, 1000)
        },
        // 点击每个选择按钮
        checkboxChange(item2, index2) {
            item2.checked = !item2.checked
            if(!item2.checked) {
                this.allChecked = false
            }else {
                let arr = Object.values(this.cartList)
                this.arr1 = []
                for(let i = 0; i < arr.length; i++) {
                    for(let j = 0; j < arr[i].list.length; j++) {
                        this.arr1.push(arr[i].list[j])
                    }
                }
                const isChecked = this.arr1.every((item) => {
                    return item.checked === true
                })
                if(isChecked) {
                    this.allChecked = true
                }else {
                    this.allChecked = false
                }
            }
        },
        // 点击全选按钮
        checkboxChange2(e) {
            this.allChecked = !this.allChecked
            if(this.allChecked) {
                this.arr1 = []
                for(let key in this.cartList) {
                        this.cartList[key].list.map((item) => {
                        this.arr1.push(item)
                    })
                }
                this.arr1.map((item) => {
                    return item.checked = true
                })
            }else {
                this.arr1 = []
                for(let key in this.cartList) {
                        this.cartList[key].list.map((item) => {
                        this.arr1.push(item)
                    })
                }
                this.arr1.map((item) => {
                    return item.checked = false
                })
            }
        },
        // 点击结算去创建订单页面
        goSettle() {
            this.cart_ids = []
            this.allSelectedGoods = []
            for(let key in this.cartList) {
                this.cartList[key].list.forEach((item) => {
                    if(item.checked == true) {
                        console.log(item)
                        item.spu.details = ''
                        this.cart_ids.push(item.cart_id.toString())
                        this.allSelectedGoods.push(item)
                    }
                })
            }
            console.log(this.cart_ids)
            console.log(this.allSelectedGoods)
            if(this.allSelectedGoods.length == 0) {
                uni.showToast({
                    title: '未选择商品',
                    icon: 'none'
                })
            }else {
                uni.navigateTo({
                    url: '/pagesC/confirm-order/confirm-order?cart_ids=' + JSON.stringify(this.cart_ids) + '&allSelectedGoods=' + JSON.stringify(this.allSelectedGoods) + '&type=2' + '&price=' + this.totalPrice
                })
            }
        },
        // 删除购物车商品
        delCart(id) {
            console.log(id)
            cartModel.delCartGoods(id).then((res) =>{
                if(res.code == 204) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                    this._getCartList()
                }
            })
        }
    },
    computed: {
        totalNum() {
            let totalNum = 0
            for(let key in this.cartList) {
                this.arr1.map((item) => {
                    return item.checked ? totalNum += item.number : totalNum += 0
                })
                return totalNum
            }
            return totalNum
        },
        totalPrice() {
            let totalPrice = 0
            for(let key in this.cartList) {
                this.arr1.map((item) => {
                    return item.checked ? totalPrice += (item.spu.sku.filter(item1 => item1.id == item.sku_id)[0].activity_price)*item.number : totalPrice += 0
                })
                return totalPrice
            }
            return totalPrice
        }
    }
}
</script>

<style>
    .header {
        margin-top: 33rpx;
        margin-left: 39rpx;
        display: flex;
        justify-content: left;
    }
    .cart {
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
    }
    .cart-total {
        color: #333333;
        font-size: 24rpx;
        font-weight: 400;
        margin-left: 27rpx;
        line-height: 40rpx;
    }
    .shopping-box {
        width: 676rpx;
        height: 100%;
        margin-top: 25rpx;
        margin-left: 37rpx;
    }
    .shopping-item {
        width: 644rpx;
        background: #ffffff;
        border-radius:10rpx;
        padding: 20rpx 23rpx 32rpx 13rpx;
        margin-bottom: 20rpx;
        overflow: hidden;
    }
    .shopping-item-line1 {
        display: flex;
        justify-content: left;
    }
    .shop-icon {
        width: 27rpx;
        height: 25rpx;
        color: #24C79C;
    }
    .shop-name {
        display: flex;
        justify-content: left;
        color: #333333;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 26rpx;
        margin-left: 14rpx;
        margin-top: 5rpx;
    }
    .shopping-item-line2 {
        position: relative;
        margin-top: 70rpx;
        display: flex;
        justify-content: left;
    }
    .cart-del {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        width: 42rpx;
        height: 41rpx;
    }
    checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #24C79C !important;
        border-color: rgba(36,199,156,1) !important;
        transform: scale(0.9)
	}
    .shopping-item-img {
        width: 165rpx;
        height: 165rpx;
        border-radius:10rpx;
    }
    .shopping-item-info {
        margin-left: 38rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .shopping-item-info-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .shopping-item-info-price {
        display: flex;
        justify-content: space-left;
    }
    .now-price {
        color: #FF1E1E;
        font-size: 30rpx;
        font-weight: bold;
    }
    .old-price {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        text-decoration: line-through;
        margin-left: 27rpx;
        line-height: 40rpx;
    }
    .free-shipping {
        width:66rpx;
        height:26rpx;
        border:1rpx solid rgba(36,199,156,1);
        border-radius:13rpx;
        color: #24C79C;
        font-size: 24rpx;
        text-align: center;
        line-height: 26rpx;
        margin-top: 10rpx;
    }
    .shopping-item-other {
        display: flex;
        justify-content: space-between;
    }
    .shopping-item-info-num {
        display: flex;
        justify-content: space-between;
        margin-left: 150rpx;
    }
    .num-sub,
    .num-add {
        width:43rpx;
        height:43rpx;
    }
    .num-number {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        margin: 0 35rpx;
    }
    .settle-box {
        position: fixed;
        bottom: 102rpx;
        left: 0rpx;
        width: 100%;
        height: 100rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
    }
    .settle-box-left {
        color: #999999;
        font-size: 28rpx;
        line-height: 100rpx;
        margin-left: 42rpx;
    }
    .settle-box-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: #333333;
        line-height: 100rpx;
    }
    .settle-button {
        width: 183rpx;
        height: 63rpx;
        background: #24C79C;
        font-size: 30rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 63rpx;
        border-radius: 34rpx;
        margin-left: 30rpx;
        margin-right: 42rpx;
    }
    .no-cart {
        position: relative;
        top: 40%;
        transform: translateY(-50%);
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
    }
</style>